let _ctx;

class _View {
  padding = {left: 0, top: 0, right: 0, bottom: 0}
  x = 0;
  y = 0;
  width = 10;
  height = 10;
  radius = 0
  backgroundColor = "orange";

  shadowOffsetX = 0
  shadowOffsetY = 0
  shadowBlur = 0
  shadowColor = 'rgba(0,0,0,0.25)'

  cx = 0
  cy = 0

  constructor(x,y,width,height) {
    if (x) this.x = x
    if (y) this.y = y
    if (width) this.width = width
    if (height) this.height = height
  }

  // parent = null

  add(view) {
    view.parent = this

    const drawX = this.cx + this.padding.left
    const drawY = this.cy + this.padding.top

    view.draw(drawX, drawY);

    view.cx = this.cx + this.padding.left + view.x
    view.cy = this.cy + this.padding.top + view.y
  }
}

class _Rect extends _View {

  constructor(x,y,width,height) {
    super(x,y,width,height);
  }

  draw(px = 0, py = 0) {

    if (this.shadowBlur) {
      _ctx.shadowOffsetX = this.shadowOffsetX
      _ctx.shadowOffsetY = this.shadowOffsetY
      _ctx.shadowBlur = this.shadowBlur
      _ctx.shadowColor = this.shadowColor
    }

    _ctx.fillStyle = this.backgroundColor;
    _ctx.beginPath()
    _ctx.roundRect(px + this.x, py + this.y, this.width, this.height, this.radius)
    _ctx.fill()
  }
}

class _Canvas extends _View {
  type = 'small' // small medium large
  constructor(id, type) {
    super();
    const canvas = document.getElementById(id);
    
    if (type === 'small') {
      canvas.width = "510";
      canvas.height = "510";
    }
    if(type === 'medium') {
      canvas.width = "1092";
      canvas.height = "510";
    }
    if(type === 'large') {
      canvas.width = "1092";
      canvas.height = "1092";
    }
    
    _ctx = canvas.getContext("2d");
  }
}

class _Text extends _View {
  width = undefined;
  align = 'left' // left center right
  textColor = 'black'
  fontSize = '36'
  fontFamily = ''
  font = null
  constructor(text) {
    super();
    this.text = text;
  }

  draw(px, py) {
    _ctx.fillStyle = this.textColor
    if (this.font) {
      _ctx.font = this.font
    }else {
      _ctx.font = this.fontSize + 'px Arial'
    }
    
    _ctx.textBaseline = "hanging";
    _ctx.textAlign = this.align
    _ctx.fillText(this.text, px + this.x, py + this.y, this.width);
  }
}

class _Image extends _View {
  src = "./pie.png";
  constructor(src) {
    super();
    this.image = new Image();
    this.image.src = "./pie.png";
    this.src = src;
  }

  draw(px, py) {
    this.image.onload = () => {
      _ctx.drawImage(this.image, px + this.x, py + this.y);
    };
  }
}

class _Circle extends _View {
  radius = 10;

  draw(px = 0, py = 0) {
    _ctx.shadowColor = "#bebebe";
    _ctx.shadowOffsetX = 20;
    _ctx.shadowOffsetY = 20;
    _ctx.shadowBlur = 60;

    //       background: #e0e0e0;
    // box-shadow:  20px 20px 60px #bebebe,
    //              -20px -20px 60px #ffffff;

    _ctx.fillStyle = this.backgroundColor;
    _ctx.beginPath();
    _ctx.arc(
      px + this.x + this.radius * 0.5,
      py + this.y + this.radius * 0.5,
      this.radius,
      0,
      Math.PI * 2
    );
    _ctx.fill();
  }
}

function getContext() {
  return _ctx
}

const Draw = {
  getContext: getContext,
  Canvas: _Canvas,
  View: _View,
  Rect: _Rect,
  Circle: _Circle,
  Image:_Image,
  Text: _Text,
};

